<template>
	<view class="container">

		<view class="tui-calendar-box">
			<!--isChange 加上则切换年份或月份时回传数据-->
			<tui-calendar :lunar="lunar" :activeBgColor="activeBgColor" :rangeBgColor="rangeBgColor"
				:rangeColor="rangeColor" color="#333" :type="1" :status="status" :arrowType="2" isChange
				@change="monthChange"></tui-calendar>
			<!-- <tui-calendar
				:lunar="lunar"
				:minDate="minDate"
				:maxDate="maxDate"
				:btnType="btnType"
				:activeBgColor="activeBgColor"
				:rangeBgColor="rangeBgColor"
				:rangeColor="rangeColor"
				:startText="startText"
				:endText="endText"
				:arrowType="arrowType"
				:type="type"
				:initStartDate="initStartDate"
				:initEndDate="initEndDate"
				@change="monthChange"
			></tui-calendar> -->
		</view>
		<view class="tui-title tui-ptop20">
			{{currentDate}}
			<view>
				<view class="task_text" @tap="goCreateTask"> + 创建任务</view>
			</view>
			<!-- <switch class="tui-switch" :checked="lunar" color="#5677fc" @change="switchChange"></switch> -->
		</view>
		<view class="tui-mtop">
			<tui-tabs :tabs="navbar" backgroundColor="#fafafa" :height="88" :currentTab="currentTab>1?0:currentTab"
				:sliderWidth="150" :sliderHeight="60" bottom="50%" color="#999" selectedColor="#" :bold="true"
				sliderBgColor="#fafafa" @change="change" itemWidth="50%" :width="200" unlined></tui-tabs>
		</view>
		<view class="tui-order-list">
			<view class="tui-task-item">
				<block v-for="(item,index) in taskList" :key="index">
					<tui-list-cell padding="0" @click="detail(item)" v-if="item.type == '0'">
						<view class="tui-goods-item">
							<!-- <image :src="item.avator" class="tui-goods-img"></image> -->
							<view class="tui-goods-center">
								<view class="tui-good-info">
									<view class="tui-goods-name">{{item.shopName}}</view>
									<!-- <tui-tag margin="0 0 0 20rpx  " padding="8rpx" size="24rpx" type="light-orange">VIP2
									</tui-tag> -->
								</view>

								<view class="tui-goods-attr">巡店任务</view>
								<!-- <view class="tui-goods-attr">{{item.shopAddress}}</view> -->
							</view>
							<view class="tui-price-right font-color-theme">
								<view v-if="item.status==0&& item.lat != null  ">已签到</view>
								<!-- <view>x2</view> -->
							</view>
						</view>
					</tui-list-cell>
					<tui-list-cell padding="0" @click="detail(item)" v-if="item.type == '1'">
						<view class="tui-goods-item">
							<!-- <image :src="item.avator" class="tui-goods-img"></image> -->
							<view class="tui-goods-center">
								<view class="tui-good-info">
									<view class="tui-goods-name">{{item.shopName}}</view>
									<!-- <tui-tag margin="0 0 0 20rpx  " padding="8rpx" size="24rpx" type="light-orange">VIP2
									</tui-tag> -->
								</view>

								<view class="tui-goods-attr">新商家任务</view>
								<view class="tui-goods-attr">{{item.shopAddress}}</view>
							</view>
							<!-- <view class="tui-price-right">
								<view>￥298.00</view>
								<view>x2</view>
							</view> -->
						</view>
					</tui-list-cell>
				</block>

			</view>

		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#fafafa"></tui-nomore>
		<!--加载loadding-->

	</view>

</template>

<script>
	import {
		getTaskList
	} from '@/apis/user'

	export default {
		data() {
			return {
				status: [],
				arrowType: 1,
				minDate: '1920-01-01',
				maxDate: '',
				startText: '开始',
				endText: '结束',
				activeBgColor: '#5677fc',
				rangeBgColor: 'rgba(86,119,252,0.1)',
				rangeColor: '#5677fc',
				isActiveCurrent: true,
				lunar: true,
				result: '',
				lunarResult: '',
				initStartDate: '',
				initEndDate: '',
				navbar: [{
					name: "待完成任务",
				}, {
					name: "已完成任务"
				}],
				currentTab: 0,
				taskList: [],
				pageNum: 1,
				pageSize: 100,
				loadding: false,
				pullUpOn: true,
				currentDate: '',
				taskStatus: '0'
			}
		},
		mounted() {

			this.doGetTaskList();
		},
		methods: {
			detail: function(item) {
				if(item.status == 0){
					if (item.type == 0) {
						if(item.lat == null){
							this.$yrouter.push({
								path: '/pages/business/doTask/doTask',
								query: {
									id: item.id,
									merchantId: item.memberId,
									merchantName: item.shopName
								},
							})
						}else{
							this.$yrouter.push({
								path: '/pages/business/taskTourFinish/taskTourFinish',
								query: {
									id: item.id,
									merchantId: item.memberId,
									merchantName: item.shopName
								},
							})
						}
						
					} else {
						this.$yrouter.push({
							path: '/pages/business/taskMerchantFinish/taskMerchantFinish',
							query: {
								id: item.id
							},
						})
					}
				}else if(item.status == 1){
					// this.$yrouter.push({
					// 	path: '/pages/business/taskMerchantFinish/taskMerchantFinish',
					// 	query: {
					// 		id: item.id
					// 	},
					// })
				}
				

			},
			monthChange(e) {
				let that = this;
				console.log(e)
				this.currentDate = e.result;
				let day = e.day;
				// if (e.year == year && e.month == month) {
				let days = e.days;
				let status = [];
				for (let i = 0; i < days; i++) {

					let bgColor = (i === (day - 1) ? '#19be6b' : '#fff');

					let check = false;
					let color = i === (day - 1) ? '#fff' : '#333';
					status.push({
						bgColor: bgColor,
						color: color,
						check: check
					});
				}
				this.status = status;
				console.log(this.status)
				// } else {
				// 	this.status = [];
				// }
				that.pageNum = 1;
				that.doGetTaskList();

			},

			goCreateTask: function() {
				this.$yrouter.push({
					path: '/pages/business/createTask/index'
				})

			},
			change(e) {
				let that = this;
				that.currentTab = e.index
				if (that.currentTab == 0) {
					that.taskStatus = "0";
				} else {
					that.taskStatus = "1";
				}
				that.pageNum = 1;
				that.doGetTaskList();

			},
			doGetTaskList: function() {
				let that = this;
				getTaskList(that.taskStatus, that.currentDate, that.pageNum, that.pageSize).then(res => {
					// console.log(res)
					if (that.pageNum === 1) {
						that.taskList = [];
					}
					that.taskList = that.taskList.concat(res.rows)
					that.pageNum++;
					//是否可以加载更多
					that.pullUpOn = that.taskList.length < res.total
					//正在加载
					that.loading = false
					console.log("长度： " + that.taskList.length + ",pageNum：" + that.pageNum)


				})
			},


			doOnPullDownRefresh: function() {
				console.log("onPullDownRefresh")
				this.pageNum = 1;
				uni.stopPullDownRefresh();

				this.doGetTaskList();

			},

			// 页面上拉触底事件的处理函数
			doOnReachBottom: function() {
				console.log("onReachBottom pullUpOn:" + this.pullUpOn)
				if (this.pullUpOn) {
					this.doGetTaskList();
				}

			}
		}
	}
</script>

<style>
	.tui-calendar-box {
		padding: 20rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.tui-title {
		width: 100%;
		padding: 80rpx 30rpx 30rpx;
		box-sizing: border-box;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
	}

	.tui-ptop20 {
		padding-top: 20rpx;
	}

	.task_text {
		color: #2FCC71;
		font-size: 30rpx;
	}

	.tui-mtop {
		margin-top: 36rpx;
	}

	/*为你推荐*/
	.tui-order-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.tui-order-container {
		flex: 1;
		margin-right: 2%;
	}

	.tui-cell-header {
		width: 100%;
		height: 74rpx;
		padding: 0 26rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-cell-title {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: 600;
		color: #333;
	}

	.tui-task-item {
		width: 100%;
		margin: 20rpx 30rpx 0 30rpx;
		border-radius: 12rpx;
		overflow: hidden;
		background: #fff;
	}

	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-order-status {
		color: #888;
		font-size: 26rpx;
	}

	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 32rpx;
		color: #333;
	}

	.tui-goods-attr {
		font-size: 24rpx;
		color: #999;
		line-height: 32rpx;
		padding-top: 10rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-good-info {
		width: 100%;
		display: flex;
	}

	.tui-goods-img {
		width: 120rpx;
		height: 160rpx;
		display: block;
		flex-shrink: 0;
	}
</style>
